<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要输入的内容(最多吐槽140字）"
        maxlength="140"></textarea>
        <!--背景色用type指定，尺寸用size指定-->
        <mt-button type="primary" size="large">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item">
                <div class="cmt-title" >
                    第1楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2017-08-16 15：32：45
                </div>
                <div class="cmt-body" >
                    莎士比亚说过：时间会刺破青春表面的彩饰，会在美人的额上掘深沟浅槽；会吃掉稀世之珍！天生丽质，什么都逃不过他那横扫的镰刀。
                </div>
            </div><div class="cmt-item">
                <div class="cmt-title" >
                    第2楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2017-08-16 15：32：45
                </div>
                <div class="cmt-body" >
                    狄尔治夫人说过：原谅敌人要比原谅朋友容易。
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title" >
                    第3楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2017-08-16 15：32：45
                </div>
                <div class="cmt-body" >
                    卡耐基说过：要使别人喜欢你，首先你得改变对人的态度，把精神放得轻松一点，表情自然，笑容可掬，这样别人就会对你产生喜爱的感觉了。
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title" >
                    第4楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2017-08-16 15：32：45
                </div>
                <div class="cmt-body" >
                    歌德说过：我们为祖国服务，也不能都采用同一方式，每个人应该按照资禀，各尽所能。
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title" >
                    第5楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2017-08-16 15：32：45
                </div>
                <div class="cmt-body" >
                    爱因斯坦说过：人只能有献身社会，才能找出那实际上是短暂而有风险的生命的意义。
                </div>
            </div>
            <div class="cmt-item">
                <div class="cmt-title" >
                    第6楼&nbsp;&nbsp;用户：匿名用户&nbsp;&nbsp;发表时间：2017-08-16 15：32：45
                </div>
                <div class="cmt-body" >
                    保罗说过：人生犹如一本书，愚蠢者草草翻过，聪明人细细阅读。为何如此.因为他们只能读它一次。
                </div>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>

    </div>

    <!--用get请求得到评论,渲染得到的评论-->
    <!--<div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入要输入的内容(最多吐槽140字）"
                  maxlength="140"></textarea>
        <mt-button type="primary" size="large">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item ,i) in comments" :key="item.add_time">
                <div class="cmt-title" >
                    第{{ i+1 }}楼&nbsp;&nbsp;用户：{{ item.user_name }}&nbsp;&nbsp;发表时间：{{ item.add_time }}</div>
                <div class="cmt-body" >
                    {{ item.content === 'undefined' ?  '此用户很蓝，啥也没说' :item.content}}</div>
                <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
            </div>
        </div>
    </div>-->
</template>

<script>
    export default {
        data(){
            return{
               pageIndex:1, //默认展示第一页数据
                user:'',
                content:'',
                comments:[],
            }
        },

        methods: {
            getMore() {
                //加载更多
                this.pageIndex++;
            },
        },
        props:["id"] //使用父组件的id要定义一些

    }

</script>

<style lang="scss" scoped>
    .cmt-container{
        h3{
            font-size: 18px;
        }
        textarea{
            font-size: 14px;
            height: 85px;
            margin: 0;
        }
        .cmt-list{
            margin: 5px 0;
            .cmt-item{
                font-size: 13px;
                .cmt-title{
                    line-height: 40px;
                    background-color:#ccc;
                }
                .cmt-body{
                    line-height: 30px;
                    text-indent: 2em;  /*水平缩进*/
                }
            }

        }

    }

</style>